React (JavaScript)
Autor | Jordan Walke |
Desenvolvedor | |
Plataforma | Multiplataforma |
Modelo do desenvolvimento | Software de código aberto |
Lançamento | 29 de maio de 2013 (11 anos)[1] |
Versão estável | 18.2.0[2] (14 de junho de 2022 ) |
Idioma(s) | Multilíngue |
Escrito em | JavaScript[3] |
Sistema operativo | Multiplataforma |
Gênero(s) | Biblioteca JavaScript |
Licença | Licença MIT[4] |
Estado do desenvolvimento | Corrente |
Tamanho | 7,43 MB[2] |
Página oficial | react |
O React (também denominado React.js ou ReactJS) é uma biblioteca front-end JavaScript de código aberto com foco em criar interfaces de usuário em páginas web.
Criado em 2011 pelo Facebook, com a criação de views declarativas e baseando-se em componentes, possuía o intuito de otimizar a atualização e a sincronização de atividades simultâneas no feed de notícias da rede social e melhorar a manutenção de código.
É mantido pelo Facebook, Instagram, outras empresas e uma comunidade de desenvolvedores individuais. É utilizado nos sites da Netflix, Imgur, Feedly, Airbnb, SeatGeek, HelloSign, Walmart e outros.[5]
Em 2015, o Facebook anunciou o módulo React Native, que em conjunto com o React, possibilita o desenvolvimento de aplicativos para Android e iOS utilizando componentes de interface de usuário nativos de ambas plataformas, sem precisar recorrer ao HTML.[6]
Na pesquisa de 2018 sobre hábitos de desenvolvedores do site Stack Overflow, o React foi a terceira biblioteca ou framework mais citado pelos usuários e desenvolvedores profissionais, ficando atrás somente do Node.js e Angular, respectivamente.[7]
JSX
[editar | editar código-fonte]Semelhante ao HTML, o JSX é uma extensão de sintaxe para JavaScript. Embora seu uso não seja obrigatório, a maioria dos desenvolvedores o utiliza para descrever como a UI deveria parecer.
Exemplo :
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
Depois da compilação, as expressões em JSX se transformam em chamadas normais de funções que retornam objetos JavaScript.[8]
Virtual DOM
[editar | editar código-fonte]É uma representação virtual da interface do usuário que é armazenada em memória e mantida em sincronia com a DOM “real”. Dessa forma, o React só altera na verdadeiro DOM apenas o que foi modificado. Assim, é abstraída a manipulação de atributos, de eventos e atualização manual do DOM.
A Virtual DOM está associada aos elementos da biblioteca, que são objetos representando a UI. Entretanto, o React também possui os “fibers”, que são objetos internos que contém informações sobre a árvore de componentes e podem ser considerados parte da Virtual DOM.[9]
Algoritmo de Reconciliação
[editar | editar código-fonte]Reconciliação é o processo pelo qual o React atualiza o DOM do navegador. A cada renderização o React retorna uma árvore de elementos diferentes. Nesse sentido, é necessário descobrir como a interface deve ser atualizada para estar em sincronia com a última árvore apresentada. Os conceitos por trás deste algoritmo são a Virtual DOM e o algoritmo de diffing.[10]
Em toda atualização, é criado uma nova Virtual DOM e compara com a sua versão anterior. Essa comparação ocorre pelo algoritmo de diffing. Após a comparação ser realizada, uma outra Virtual DOM é produzida já com as alterações adicionadas. Por fim, o React faz a atualização da DOM “real” no navegador com o menor número de atualizações possíveis.[11]
Referências
- ↑ JSConf (5 de agosto de 2013). «[JSConfUS 2013] Tom Occhino and Jordan Walke: JS Apps at Facebook». Youtube (em inglês). Consultado em 4 de julho de 2022
- ↑ a b «Release 18.2.0 (June 14, 2022)». Github (em inglês). 14 de junho de 2022. Consultado em 15 de abril de 2023
- ↑ «facebook/react: A declarative, efficient, and flexible JavaScript library for building user interfaces.». Github (em inglês). Consultado em 22 de maio de 2021
- ↑ «react/LICENSE at master». Github (em inglês). Consultado em 22 de maio de 2021
- ↑ «JavaScript's History and How it Led To ReactJS». thenewstack.io (em inglês). Consultado em 19 de fevereiro de 2017
- ↑ «React Native: Bringing modern web techniques to mobile - Facebook Code». Facebook Code (em inglês). 26 de março de 2015
- ↑ «Developer Survey 2018». Stack Overflow. 2018. Consultado em 4 de julho de 2022
- ↑ «Introduzindo JSX – React». pt-br.reactjs.org. Consultado em 29 de setembro de 2022
- ↑ «React: The Virtual DOM». Codecademy (em inglês). Consultado em 29 de setembro de 2022
- ↑ «Reconciliação (Reconciliation) – React». pt-br.reactjs.org. Consultado em 29 de setembro de 2022
- ↑ «Reconciliação ReactJS – Acervo Lima». acervolima.com. Consultado em 29 de setembro de 2022